<template>
  <div class="app app-header-fixed app-aside-fixed">
    <appHeader/>
    <appNav/>
    <div class="app-content" :style="{height:bodyHeight+'px'}">
      <div :class="['butterbar',{'active':loadingBar}]"><span class="bar"></span></div>
      <div id="fs-app-content-body" class="app-content-body fade-in-up ng-scope" :style="{height:bodyHeight-38+'px'}">
        <router-view/>
      </div>
    </div>
    <div class="app-footer b-t bg-light" id="app-body-footer" style="padding:6px">
      <span class="pull-right ng-binding" style="line-height: 25px;">
         &nbsp;&nbsp;Blog&nbsp;&nbsp;V0.0.1&nbsp;&nbsp;&nbsp;&nbsp;©2013-2016&nbsp;<a target="_blank" href="http://www.fangshuoit.com/">方硕软件</a></span>
      <!-- &copy; {{app.copyright}} -->
    </div>
  </div>
</template>
<script>
  import AppHeader from 'components/header/header.index.vue'
  import AppNav from 'components/nav/nav.index.vue'
  import {ROUTE_URL} from '../../router/routes'
  export default {
    components: {
      AppHeader, AppNav
    },
    created(){
      const self = this;
      window.onresize = function () {
        self.$store.commit('bodyHeightUpdate');
      }
    },
    computed: {
      loadingBar(){
        return this.$store.state.loadingBarActive;
      },
      bodyHeight(){
        return this.$store.state.bodyHeight;
      }
    }
  }
</script>
<style scoped>
  .fade-enter-active {
    transition: opacity .5s
  }

  .fade-enter {
    opacity: 0
  }
</style>
